<template>
  <div class="container">
    <el-form ref="article" :model="article" :rules="rules" size="400">
      <el-form-item label="文章标题:" prop="title">
        <el-input
          v-model.trim="article.title"
          placeholder="请输入文章标签"
        ></el-input>
      </el-form-item>
      <el-form-item label="文章内容:" prop="articleBody">
        <!-- style="height: 200px; margin-bottom: 55px" -->
        <quillEditor v-model="article.articleBody" :options="editorOption" />
      </el-form-item>
      <el-form-item label="视频地址:" prop="videoURL">
        <el-input
          placeholder="请输入视频地址"
          v-model="article.videoURL"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="isClick" @click="okVisible"
        >确 定</el-button
      >
      <el-button type="primary" v-else @click="upVisible">修 改</el-button>
      <el-button @click="noVisible">取 消</el-button>
    </div>
  </div>
</template>

<script>
// 导入富文本编辑器的样式和组件
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入后台接口
import { add, update } from '@/api/hmmm/articles.js'
export default {
  name: 'ArticlesAdd',
  data () {
    return {
      // 添加文章数据
      article: {
        // 文章id
        id: null,
        // 文章标题
        title: null,
        // 文章内容
        articleBody: null,
        // 视频地址
        videoURL: null
      },
      // 按钮切换
      isClick: false,
      // 验证规则
      rules: {
        title: [
          // 必填项
          { required: true, message: '请输入文章标题', trigger: 'blur' },
          // 内容验证
          { min: 5, max: 30, message: '长度在5~30之间', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
          { min: 20, message: '最少输入20个字', trigger: 'blur' }
        ]
      },
      // 富文本的自定义配置项
      editorOption: {
        placeholder: '请输入文章内容', // 占位文字
        modules: {
          // 工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],
            [{ header: 1 }, { header: 2 }],
            [{ list: 'ordered' }, { list: 'bullet' }],
            [{ indent: '-1' }, { indent: '+1' }],
            ['image']
          ]
        }
      }
    }
  },
  // 注册组件
  components: {
    quillEditor
  },
  // 接收父组件自定义的属性
  props: {
    // 弹出框的显示隐藏
    FormVisible: {
      type: Boolean,
      default: false
    },
    // 父组件点击传递 过来的数据
    itemArticle: {
      type: Object,
      default: () => {
        return {}
      }
    }
    // 父组件穿过来监听点击添加按钮
    // itemAdd: {
    //   type: Number,
    //   default: 0
    // }
  },
  // 侦听器
  watch: {
    // 侦听弹出框隐藏的时候(false),对表单进行重置,移除验证结果
    FormVisible: {
      handler (newVal, oldVal) {
        if (newVal === false) {
          this.article = {}
          // 对表单进行重置,移除验证结果
          this.$refs.article.resetFields()
        }
        // 修改按钮的状态， 让确定显示出来
        this.isClick = true
      },
      immediate: true
    },
    // 侦听父组件传递过来的数据id
    'itemArticle.id': {
      handler (newVal, oldVal) {
        console.log('子--传过来的id', '新', newVal, '旧', oldVal)
        console.log(this.itemArticle)
        if (newVal !== undefined) {
          // 修改按钮的状态， 让修改显示出来
          this.isClick = false
          const { title, articleBody, videoURL, id } = this.itemArticle
          this.article = {
            title, articleBody, videoURL, id
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    // 修改按钮， 修改文章
    upVisible () {
      console.log('点击了修改')
      // 拿到所有表单的验证结果
      this.$refs.article.validate((valid) => {
        if (valid) {
          try {
            console.log('子组件的修改进入try')
            console.log('子组件的修改', this.article.title)
            const { id, title, articleBody, videoURL } = this.article
            const data = {
              id, title, articleBody, videoURL
            }
            update(data)
            this.$message({
              message: '修改成功',
              type: 'success'
            })
          } catch (error) {
            console.warn(error)
            this.$message({
              message: '修改失败',
              type: 'warning'
            })
          }
          // 修改父组件中弹框的隐藏
          this.$emit('update:FormVisible', false)
        }
      })
    },
    // 确定按钮,添加文章
    okVisible () {
      // 拿到所有表单的验证结果
      this.$refs.article.validate((valid) => {
        // 验证通过(true)进入
        if (valid) {
          const { title, articleBody, videoURL } = this.article
          const data = {
            title,
            articleBody,
            videoURL
          }
          try {
            add(data)
            // this.article.title = ''
            // this.article.articleBody = ''
            // this.article.videoURL = ''
            this.$message({
              message: '添加成功',
              type: 'success'
            })
          } catch (error) {
            console.warn(error)
            this.$message({
              message: '添加失败',
              type: 'warning'
            })
          }
          // 修改父组件中弹框的隐藏
          this.$emit('update:FormVisible', false)
        }
      })
    },
    // 点击取消
    noVisible () {
      // 修改父组件中弹框的隐藏
      this.$emit('update:FormVisible', false)
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  // 表单域
  /deep/ .el-form {
    width: 100%;
    // 每一行
    .el-form-item--400 {
      display: flex;
      // width: 80%;
      // 富文本编辑器  el-form-item__content
      .quill-editor {
        height: 200px;
        margin-bottom: 55px;
        width: 650px;
      }
      // input框 .el-input--400
      .el-input {
        // flex: 1;
        // width: 100%;
        width: 650px;
      }
      // label标签
      /deep/ .el-form-item__label {
        width: 100px;
      }
    }
  }
  // 确定取消按钮
  .dialog-footer {
    display: flex;
    flex-direction: row-reverse;
    .el-button {
      margin-right: 38px;
    }
  }
}
</style>
